<template>
  <div class="advanced table-theme">
    <head-title title="高端产品"></head-title>
    <el-card header="基本设置">
      <el-form :model="baseForm" status-icon label-width="100px" label-position="top">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="PC端封面图:" class="upload-box">
              <div class="goods-img-upload">
                <div class="goods-img-upload-btns">
                  <el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 'pc_cover_img'); } ">
                    <el-button type="primary" size="small">上传图片</el-button>
                  </el-upload>
                  <div class="el-upload__tip">380*400像素</div> </div> <div class="goods-img-upload-imgs">
                    <el-image :src="baseForm.pc_cover_img" fit="contain" :preview-src-list="[baseForm.pc_cover_img]" class="baseImg">
                      <div slot="error"></div>
                    </el-image>
                  </div>
                </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="PC端主图:" class="upload-box">
              <div class="goods-img-upload">
                <div class="goods-img-upload-btns">
                  <el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 'pc_image'); } ">
                    <el-button type="primary" size="small">上传图片</el-button>
                  </el-upload>
                  <div class="el-upload__tip">1600*720像素</div> </div> <div class="goods-img-upload-imgs">
                    <el-image :src="baseForm.pc_image" fit="contain" :preview-src-list="[baseForm.pc_image]" class="baseImg">
                      <div slot="error"></div>
                    </el-image>
                  </div>
                </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小程序封面图:" class="upload-box">
              <div class="goods-img-upload">
                <div class="goods-img-upload-btns">
                  <el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 'cover_img'); } ">
                    <el-button type="primary" size="small">上传图片</el-button>
                  </el-upload>
                  <div class="el-upload__tip">690*(任意高度)像素</div> </div> <div class="goods-img-upload-imgs">
                    <el-image :src="baseForm.cover_img" fit="contain" :preview-src-list="[baseForm.cover_img]" class="baseImg">
                      <div slot="error"></div>
                    </el-image>
                  </div>
                </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小程序主图:" class="upload-box">
              <div class="goods-img-upload">
                <div class="goods-img-upload-btns">
                  <el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 'image'); } ">
                    <el-button type="primary" size="small">上传图片</el-button>
                  </el-upload>
                  <div class="el-upload__tip">690*(任意高度)</div> </div> <div class="goods-img-upload-imgs">
                    <el-image :src="baseForm.image" fit="contain" :preview-src-list="[baseForm.image]" class="baseImg">
                      <div slot="error"></div>
                    </el-image>
                  </div>
                </div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="add" style="display: flex;justify-content: center;padding: 20px 0;">
          <el-button type="primary" @click="saveBase">保存</el-button>
        </div>
      </el-form>
    </el-card>
    <el-card header="品牌推荐" style="margin-top: 20px">
      <el-table :data="seniorFactoryList" stripe>
        <el-table-column label="工厂ID" align="center" prop="factory_id" width="80"></el-table-column>
        <el-table-column label="排序" align="center" width="100">
          <template #default="{row}">
            <el-input v-model="row.sort" placeholder="" @blur="setFactorySort($event,row.sort,row.id)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="factory_name"></el-table-column>
        <el-table-column label="工厂封面" align="center" width="100">
          <template slot-scope="scope">
						<ImgPopover :src="scope.row.cover_img"></ImgPopover>
					</template>
        </el-table-column>
        <el-table-column label="工厂简介" prop="brief"></el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template #default="{row}">
            <el-button type="primary" size="mini" @click="edit(row)">编辑</el-button>
            <el-button type="success" size="mini" @click="recommend(row)">推荐商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="brandTotal" @current-change="getSeniorFactoryList" :current-page="brandPage"></el-pagination>
			</div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span style="margin-right: 20px">专题页面</span>
        <el-button type="primary" @click="editImg()">添加</el-button>
      </div>
      <el-table :data="imgList" stripe>
        <el-table-column label="ID" align="center" prop="id" width="80"></el-table-column>
        <el-table-column label="排序" align="center" width="100">
          <template #default="{row}">
            <el-input v-model="row.sort" placeholder="" @blur="setImgSort($event,row.sort,row.id)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="PC端图片" align="center" width="100">
          <template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
        </el-table-column>
        <el-table-column label="移动端图片" align="center" width="100">
          <template slot-scope="scope">
						<ImgPopover :src="scope.row.wx_image"></ImgPopover>
					</template>
        </el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
        <el-table-column label="关联工厂ID" prop="factory_id"></el-table-column>
        <el-table-column label="关联工厂名" prop="factory_name"></el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template #default="{row}">
            <el-button type="primary" size="mini" @click="editImg(row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delImg(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="imgTotal" @current-change="getseniorImageList" :current-page="imgPage"></el-pagination>
			</div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import factoryEdit from './advancedForms/factoryEdit.vue'
import recommend from './advancedForms/recommend.vue'
import imgForm from './advancedForms/imgForm.vue'
export default {
  data () {
    return {
      baseForm: {
        senior_id: 1,
        pc_cover_img: '',
        pc_image: '',
        cover_img: '',
        image: '',
      },
      brandTotal: 0,
      brandPage: 1,
      seniorFactoryList: [],
      imgTotal: 0,
      imgPage: 1,
      imgList: []
    };
  },
  components: {
    ImgPopover
  },
  computed: {},
  mounted(){
    this.init()
    this.getSeniorFactoryList()
    this.getseniorImageList()
  },
  methods: {
    async init(){
      const { datas } = await this.$http(this.$ApiList.SeniorInfo,{senior_id: this.baseForm.senior_id})
      for(let i in this.baseForm){
        this.baseForm[i] = datas[i]
      }
    },
    async saveBase(){
      const { datas } = await this.$http(this.$ApiList.UpSenior,this.baseForm)
      this.$layer.msg('保存成功')
      this.init()
    },
    async getSeniorFactoryList(e){
      if(e){
        this.brandPage = e;
      }
      const { datas } = await this.$http(this.$ApiList.seniorFactoryList,{senior_id: 1,page: this.brandPage - 1 > 0? this.brandPage - 1 : 0})
      this.seniorFactoryList = datas.data
      this.brandTotal = datas.count
    },
    async setFactorySort(e,sort,id){
      if(sort){
        const { datas } = await this.$http(this.$ApiList.UpSortFactory,{id,sort})
        this.getSeniorFactoryList()
      }
    },
    upload(params,type){
      const form = new FormData();
			form.append('file[]', params.file);
      this.$http(this.$ApiList.publicUpload, form).then(res => {
        this.baseForm[type] = res.datas[0]
      });
    },
    edit(row){
      this.$layer.iframe({
        content: {
          content: factoryEdit,
          parent: this,
          data: {
            id: row.id
          }
        },
        area: ['900px', '600px'],
        title: '编辑推荐品牌',
        maxmin: true,
        shadeClose: false,
      });
    },
    recommend(row){
      this.$layer.iframe({
        content: {
          content: recommend,
          parent: this,
          data: {
            id: row.id,
            factory_id: row.factory_id
          }
        },
        area: ['80%', '80%'],
        title: '推荐商品',
        maxmin: true,
        shadeClose: false,
      });
    },
    async getseniorImageList(){
      const { datas } = await this.$http(this.$ApiList.seniorImageList,{senior_id: 1,page: this.imgPage - 1 > 0? this.imgPage - 1 : 0})
      this.imgTotal = datas.count
      this.imgList = datas.data
    },
    async setImgSort(e,sort,id){
      if(sort){
        const { datas } = await this.$http(this.$ApiList.seniorUpSortImage,{id,sort})
        this.getseniorImageList()
      }
    },
    editImg(row){
      this.$layer.iframe({
        content: {
          content: imgForm,
          parent: this,
          data: {
            id: row?row.id:''
          }
        },
        area: ['900px', '600px'],
        title: row?'编辑':'添加',
        maxmin: true,
        shadeClose: false,
      });
    },
    delImg(row){
      this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http(this.$ApiList.seniorDelImage,{id: row.id})
        this.getseniorImageList()
      }).catch(() => {});
    },
  }
}
</script>

<style lang='scss'>
  .advanced{
    .baseImg {
      position: relative;
      width: 140px;
      height: 140px;
      border: solid 1px #e5e5e5;
      margin-left: 25px;
      vertical-align: top;
    }
    .goods-img-upload{
      display: flex;
    }
  }
</style>